<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    @@include('meta.html')
    <title>注册页</title>
    <style type="text/css" media="screen">
        body,html{margin:0;padding:0;position:relative; background: #262b4a url(images/loginBg.jpg); background-repeat: no-repeat; background-position: center; height: 100%; min-height: 880px;}
        
    </style>
</head>
<body>
    @@include('header.html')
	<div class="register-box">
        <form class="login-form" action="index.html" method="post">
            <span class="form-title">欢迎注册PORTEX</span>
            
            <div class="clearfix form-group">
                <ul class="clearfix filterBox">
                    <li class="filterList">
                        <select class="selectBox"> 
                            <option value="1">+86</option>  
                            <option value="2">+87</option>  
                            <option value="3">+88</option>  
                        </select>  
                        <div class="replace">  
                            <div class="current">+86</div>  
                            <ul class="options">  
                                <li rel="1">+86</li>  
                                <li rel="2">+87</li>  
                                <li rel="3">+88</li>  
                            </ul>  
                        </div>  
                    </li>
                </ul>
                <input id="txtAccount" class="fl form-input phoneInput" type="text" autocomplete="off" placeholder="手机号码" name="account" value="">
            </div>
            <div class="clearfix form-group">
                <input id="txtPwd" class="form-input" type="password" autocomplete="off" placeholder="登录密码" name="password" value="">
            </div>
            <div class="clearfix form-group">
                <input class="form-input" type="password" autocomplete="off" placeholder="确认密码" name="repassword" value="">
            </div>
            <div class="clearfix form-group">
                <input  class="form-input" type="text" autocomplete="off" placeholder="推荐码（非必填）" name="recommend" value="">
            </div>
            <div class="clearfix form-group">
                <input id="txtVerCode" class="fl verify-input" type="text" autocomplete="off" maxlength="4" placeholder="验证码">
                <div class="fl">
                    <a id="btnChangeVerCodeImg" title="看不清楚？点击换一个" href="javascript:void(0);">
                        <img id="imgVerCode" src="images/verifycode.jpg">
                    </a>
                </div>
            </div>
            
            <div class="clearfix ">
                <div class="fl form-group">
                    <input id="phoneVerCode" class="verify-input" type="text" autocomplete="off" maxlength="4" placeholder="短信验证码">
                </div>
                <div class="fl">
                    <span class="phone-verify-btn">点击发送</span>
                </div>
            </div>
            

            <div class="form-remember">
                <i class="select-icon on"></i>
                <span class="select-text">我已阅读并同意 <a href="#" class="colorea">《用户协议》</a>和<a href="#" class="colorea">《隐私政策》</a></span>
            </div>
            
            
            <div class="form-actions">
                <a href="" class="form-btn">登录</a>
            </div>
        </form>
    </div>

    @@include('footer-js.html')
    <script>
        $(document).ready(function() { 
            var lis = $(".options li");
            
            for(var i=0;i<lis.length;i++){  
                lis[i].onclick = function(){
                    $(this).parents('.filterList').find('.selectBox').val(this.getAttribute("rel"));  
                    $(this).parents(".options").hide();  
                    $(this).parents('.replace').find(".current").html(this.innerHTML);
                    getSelectVal(this);
                }
            }  
            $(".replace").mouseover(function(){
                $(this).find(".options").show();
            })
            $(".replace").mouseout(function(){
                $(this).find(".options").hide();
            })
        });
        //自动获取
        function getSelectVal(val){
            console.log($(val).attr("rel"),$(val).html());
        }
        //获取第一个select
        console.log($('.selectBox').eq(0).val());

    </script>
</body>
</html>
